<template>
  <div class="wrapper">
    <!-- header部分 -->
    <header>
      <p>我的</p>
    </header>
    <div class="user">
      <div class="user-info">
        <img src="../assets/userImg/yhtx01.png">
        <p> user.name </p>
      </div>
      <div class="user-details">
        地址
      </div>
      <div class="foot">

        <div class="foot-button" @click="" >退出登录</div>
      </div>
    </div>
    <!-- 部分 -->



    <!--       底部组件-->
    <Footer></Footer>
  </div>

</template>

<script>
import Footer from '../components/Footer.vue'
export default {
  components:{
    Footer
  },
  data(){
    return{

    }
  },
  computed:{

  },
  created(){

  },
  methods:{

  }
}
</script>

<style scoped>
/****************** 总容器 ******************/
.wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  flex-direction: column;
}

/****************** header部分 ******************/
.wrapper header {
  width: 100%;
  height: 12vw;
  background-color: #0097ff;
  color: #fff;
  font-size: 4.8vw;

  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;

  display: flex;
  justify-content: center;
  align-items: center;
}

header {
  background-color: #f0f0f0;
  padding: 10px;
  text-align: center;
}

main {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.user {
  width: 100%;
  height: 100%;
  //border: 1px solid red;
  top: 14vw;
  position: fixed;
}


.user  .user-info {
  display: flex;
  //position: absolute;
  width: 100%;
  align-items: center;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  top: 0;


}

.user-info img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-right: 20px;
}

.user-details {
  width: 100%;
  height: 10vw;
  background-color: #0128d7;
  color: #fff;
  font-size: 4.5vw;
  font-weight: 700;
  user-select: none;
  cursor: pointer;
  position: fixed;


  justify-content: center;
  align-items: center;

  display: flex;



}
.wrapper .foot {
  width: 100%;
  height: 28vw;


  bottom: 14vw;

  display: flex;


  position: fixed;
  left: 0;

}

.wrapper .foot .foot-button {
  width: 100%;
  height: 14vw;
  bottom:0;
  background-color: #38ca73;
  color: #fff;
  font-size: 4.5vw;
  font-weight: 700;
  user-select: none;
  cursor: pointer;
  position: absolute; /* 调整为相对定位 */
  display: flex;
  justify-content: center;
  align-items: center;

}


</style>